@import "../base.less";
.col-40 {
  max-width: 40%;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 40%;
  flex: 0 0 40%;
}
.col-60 {
  max-width: 60%;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 60%;
  flex: 0 0 60%;
}
.mt-5 {
  margin-top: .05rem;
}
.mt-10 {
  margin-top: .1rem;
}
.mt-15 {
  margin-top: .15rem;
}
.solution-cooperation-title {
  position: relative;
  text-align: center;
  img {
    width: 100%;
  }
  h3 {
    position: absolute;
    top: .85rem;
    left: 0;
    width: 100%;
    .fs(35);
    color: #fff;
  }
  h4 {
    position: absolute;
    top: 1.2rem;
    left: 0;
    width: 100%;
    .fs(28);
    color: #cfd1d4;
    &.second {
      top: 1.4rem;
    }
  }
}
.solution-cooperation-item-gray {
  padding: .3rem 0;
  background: #f7f7f7;
  text-align: center;
  h3 {
    padding: 0 .25rem;
    .fs(35);
    color: #000;
    font-weight: normal;
  }
  h4 {
    padding: 0 .25rem;
    .fs(28);
    color: #000;
    font-weight: normal;
    &.large {
      .fs(30);
    }
  }
  h5 {
    padding: 0 .25rem;
    .fs(28);
    color: #666666;
    line-height: .24rem;
    font-weight: normal;
  }
  h6 {
    padding: 0 .25rem;
    font-size: 9px;
    color: #666;
    font-weight: normal;
  }
  p {
    padding: 0 .25rem;
    text-align: left;
    .fs(28);
    line-height: .2rem;
    color: #666;
  }
  img {
    width: 100%;
  }
  &.special-item {
    padding-top: 0;
    margin-top: -.2rem;
  }
}
.solution-cooperation-item-white {
  padding: .3rem 0;
  background: #fff;
  text-align: center;
  h3 {
    padding: 0 .25rem;
    .fs(35);
    color: #000;
    font-weight: normal;
  }
  h4 {
    padding: 0 .25rem;
    .fs(28);
    color: #000;
    font-weight: normal;
    &.large {
      .fs(30);
    }
  }
  h5 {
    padding: 0 .25rem;
    .fs(28);
    color: #666666;
    line-height: .24rem;
    font-weight: normal;
  }
  h6 {
    padding: 0 .25rem;
    font-size: 9px;
    color: #666;
    font-weight: normal;
  }
  .item-blue {
    padding: 0 .22rem;
    .col {
      color: #fff;
      background-color: #008eff;
    }
  }
  .item-green {
    padding: 0 .22rem;
    .col {
      color: #fff;
      background-color: #60d114;
    }
  }
  .item-orange {
    padding: 0 .22rem;
    .col {
      color: #fff;
      background-color: #f79c0d;
    }
  }
  .item-gray {
    padding: 0 .22rem;
    .col {
      color: #5a5a5a;
      background-color: #f2f2f2;
    }
  }
  .col {
    margin: 0 .03rem;
    .fs(24);
    line-height: .3rem;
    border-radius: .02rem;
    &.blank {
      background-color: #fff;
    }
  }
  img {
    width: 100%;
  }
}
.img-mix-area {
  margin: .2rem .25rem .1rem .25rem;
  border: 1px solid #ccc;
  .text-area {
    position: relative;
    .text {
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      margin-top: -.1rem;
      .fs(28);
      line-height: .2rem;
      color: #000;
    }
  }
  .col {
    margin: 0;
  }
}
.special-text {
  margin-bottom: .2rem;
}
.before-icon {
  padding-left: .45rem !important;
  padding-right: 0 !important;
  text-align: left;
}
.before-icon:before {
  margin-left: -.2rem;
  margin-right: .1rem;
  content: '●';
  color: #b9b9b9;
}
.solution-jump-detail {
  padding: .35rem 0 .4rem 0;
  text-align: center;
  .jump-text {
    .fs(35);
    span {
      color: #666;
    }
  }
  .jump-area {
    margin-top: .2rem;
    line-height: .3rem;
    .button-item {
      display: inline-block;
      width: 1.42rem;
      .fs(28);
      border: 1px solid #ddd;
      background: url(../../img/aboutUs/introduce_arrow.png) no-repeat 70% center;
      background-size: .05rem;
    }
  }
}